<template>
  <div>
    <el-input v-model="input" placeholder="请输入内容"></el-input>

    <!-- <el-yinBtu>默认按钮</el-yinBtu>
    <el-yinBtu type="primary">主要按钮</el-yinBtu> -->
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>

    <el-popover placement="top-start" title="标题" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
      <el-button slot="reference">hover 激活</el-button>
    </el-popover>

    <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
      <el-button>上左</el-button>
    </el-tooltip>
    <br>
    <br>
    <br>

    <div>
      <el-button @click="show3 = !show3">Click Me</el-button>

      <div style="margin-top: 20px; height: 200px;">
        <el-collapse-transition>
          <div v-show="show3">
            <div class="transition-box">el-collapse-transition</div>
            <div class="transition-box">el-collapse-transition</div>
          </div>
        </el-collapse-transition>
      </div>
    </div>

  </div>
</template>
<script>
export default {
  name: 'app',
  props: {

  },
  watch: {

  },
  components: {

  },
  data() {
    return {
      input: '',
      show3: true
    }
  },
  methods: {

  },
  created() {

  },
  mounted() {

  },
}
</script>
<style lang="scss" scoped>
.transition-box {
  margin-bottom: 10px;
  width: 200px;
  height: 100px;
  border-radius: 4px;
  background-color: #409EFF;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}
</style>


